<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tags.tld" prefix="s"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>喜乐康智能家居系统</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
  	<script type="text/javascript">
		$(function(){
			var listRoomId = "<s:property value="roomId" />";
			$("#roomId").val(listRoomId);
			if(listRoomId!=null && listRoomId!="")
			changeRoom(listRoomId);
		})
  	
  		var currentDeviceId = 0;
  		var currentDevice = 0;
  		function changeRoom(roomId){
			$(".device_setting_left_list").load(evn_Path+"setting!deviceSettingList.do?roomId="+roomId);
  	  	}

  		var currentRoomId = 0;
  		function addRoom(upDown){
  			if(upDown == 'down'){
  				$("#device_setting_left_input_button_oper_add").css("background-image", "url('" + evn_Path+ "resource/add_del_button_press.png')");
  			}else if(upDown== 'up'){
  		  		$("#deviceName").val("");
  				$("#deviceType").val("0");
  				if(currentDevice!=0){
  					$("#device_use_img_li"+currentDevice).attr("className",currentDeviceClass);
  				}
  				currentDeviceId = 0;
  				$("#device_setting_left_input_button_oper_add").css("background-image", "url('" + evn_Path+ "resource/add_del_button.png')");
  		  	}
  		}

  		function deviceModel(upDown){
			if($("#roomId").val()=="0"){
				if(upDown=='down'){
					alert("请选择房间！");
				}
				return ;
			}else{
				if(upDown=='down'){
					$(".device_setting_space_button").css("background-image", "url('" + evn_Path+ "resource/setting_device_space_button_press.png')");
				}else if(upDown=='up'){
					$('.setting_background').load('setting!device.do?deviceModel=2&roomId='+$("#roomId").val());
					$(".device_setting_space_button").css("background-image", "url('" + evn_Path+ "resource/setting_device_space_button.png')");
				}
			}
  	  	}

  	  	function deleteDevice(upDown){
			if(currentDevice == 0){
				if(upDown == 'down'){
					alert("请选择要删除的面板");
				}
				return ;
			}else{
				if(upDown == 'down'){
					$("#device_setting_left_input_button_oper_del").css("background-image", "url('" + evn_Path+ "resource/add_del_button_press.png')");
				}else if(upDown == 'up'){
					if(confirm("你确定要删除该面板吗？")){
						$.post(evn_Path+"setting!deleteDevice.do",{'deviceId':currentDeviceId},
								function(data){
									if(data == 'success'){
										$(".device_setting_left_list").load(evn_Path+"setting!deviceSettingList.do?roomId="+$("#roomId").val());
										$("#deviceName").val("");
										$("#deviceType").val("0");
									}
								});
					}
					currentDevice = 0 ;
					$("#device_setting_left_input_button_oper_del").css("background-image", "url('" + evn_Path+ "resource/add_del_button.png')");
				}
			}
			
  	  	}

  	  function operateRoom(operType, upDown) {
  		if ($("#roomId").val() == 0) {
  			if(upDown=='down')
  			alert("请选择房间！");
  			return;
  		}
  		if ($("#deviceName").val() == '') {
  			if(upDown=='down')
  			alert("面板名称不能为空！");
  			return;
  		}
  		if ($("#deviceType").val() == 0) {
  			if(upDown=='down')
  			alert("请选择面板类型！");
  			return;
  		}

  		if ($("#deviceName").val().length > 20) {
  			if(upDown=='down')
  			alert("面板名称不能大于20个字符！");
  			var f = document.getElementsByName("deviceName")[0];
			window.setTimeout(function(){f.focus();}, 0);
  			return;
  		}
  		
  		$.post("setting!checkDeviceName.do",{'deviceName':$("#deviceName").val(),'roomId':$("#roomId").val()},function(data){
  			if(data=='success'){
  				saveRoomSuccess(operType, upDown);
  			}else{
  				var d = data.split(",");
  				if(d.length > 1 && currentDeviceId == d[1]){
  						saveRoomSuccess(operType, upDown);
  				}else{
  					alert("面板名称已存在！");
  				}
  				
  			}
  		})
  		
  	}
  	
  	function saveRoomSuccess(operType, upDown){
  		var roomId = $("#roomId").val();
		  		var deviceName = $("#deviceName").val();
		  		var deviceType = $("#deviceType").val();
		  		if (operType == 'add') {
		  			if (upDown == 'down') {
		  				$(".device_setting_save").css("background-image", "url('" + evn_Path+ "resource/room_save_press.png')");
		  			} else if (upDown == 'up') {
		  				$.post(evn_Path + "setting!saveDevice.do", {
		  					'roomId' : roomId,
		  					'deviceName' : deviceName,
		  					'deviceType' : deviceType,
		  					'deviceId' : currentDeviceId
		  				}, function(data) {
		  					if(data == 'error'){
		  						alert("保存失败！请确保面板在编程状态!");
		  					}else{
		  						$(".device_setting_left_list").load(evn_Path+"setting!deviceSettingList.do?roomId="+roomId);
		  						$("#deviceName").val("");
		  						$("#deviceType").val("0");
		  						$.get("callVK!killVK.do");
		  					}
		  				}
		
		  				);
		  				$(".device_setting_save").css("background-image", "url('" + evn_Path+ "resource/room_save.png')");
		  			}
		  		}
  	}
  	
  	function clickDeviceName(){
  		$.get("callVK.do");
  	}
  		
  	</script>
  	
  </head>
  
  <body>
  	<div class="device_content">
  		<div class="device_setting_left_background">
  			<div style="width: 535px;height: 170px;">
	  			<div class="device_setting_left_input">
	  				<div class="device_setting_left_input_item">
	  					<span class="device_setting_left_label">房间选择</span>
	  					<div>
	  						<select id="roomId" name="roomId" class="device_setting_left_select" onchange="changeRoom(this.value)">
	  							<option value="0">请选择</option>
	  							<s:iterator value="roomList" id="room">
	  								<option value="<s:property value="roomId" />"><s:property value="roomName" /></option>
	  							</s:iterator>
	  						</select>
	  					</div>
	  				</div>
	  				<div class="device_setting_left_input_item">
	  					<span class="device_setting_left_label">面板名称</span>
	  					<div>
	  						<input type="text" id="deviceName" name="deviceName" onclick="clickDeviceName();" value="" class="device_setting_left_text" />
	  					</div>
	  				</div>
	  				<div class="device_setting_left_input_item">
	  					<span class="device_setting_left_label">面板类型</span>
	  					<div>
	  						<select id="deviceType" name="deviceType" class="device_setting_left_select">
	  							<option value="0">请选择</option>
	  							<option value="1">开关面板</option>
	  							<option value="2">调光面板</option>
	  							<option value="3">插座面板</option>
	  						</select>
	  					</div>
	  				</div>
	  			</div>
	  			<div class="device_setting_left_input_button">
	  				<div class="device_setting_left_input_button_oper" id="device_setting_left_input_button_oper_add" onmousedown="addRoom('down')" onmouseup="addRoom('up')">
	  					增加
	  				</div>
	  				<div class="device_setting_left_input_button_oper" id="device_setting_left_input_button_oper_del" onmousedown="deleteDevice('down')" onmouseup="deleteDevice('up')">
	  					删除
	  				</div>
	  			</div>
  			</div>
  			<div class="device_setting_left_list">
  				
  			</div>
  		</div>
  		<div class="device_setting_right">
  			<div class="device_setting_right_background">
  				<div style="height: 66px;">
	  				<div class="device_setting_test_button" id="device_setting_test_button1"  onmousedown="deviceOperate('device_setting_test_button1','down',1,'device')"
  	  				 onmouseup="deviceOperate('device_setting_test_button1','up',1,'device')">测试开</div>
	  				<div class="device_setting_test_button" id="device_setting_test_button2" onmousedown="deviceOperate('device_setting_test_button2','down',0,'device')"
  	  				 onmouseup="deviceOperate('device_setting_test_button2','up',0,'device')">测试关</div>
  				</div>
  				<div style="height: 78px;margin-top: 15px;">
	  				<div class="device_use_content_bottom_level" style="margin-left: 35px;float: none">
	  					<div onclick="openDeviceLevel(1)" class="device_use_content_bottom_level_1"></div>
	  					<div onclick="openDeviceLevel(2)" class="device_use_content_bottom_level_2"></div>
	  					<div onclick="openDeviceLevel(3)" class="device_use_content_bottom_level_3"></div>
	  					<div onclick="openDeviceLevel(4)" class="device_use_content_bottom_level_4"></div>
	  					<div onclick="openDeviceLevel(5)" class="device_use_content_bottom_level_5"></div>
	  					<div onclick="openDeviceLevel(6)" class="device_use_content_bottom_level_6"></div>
	  					<div onclick="openDeviceLevel(7)" class="device_use_content_bottom_level_7"></div>
	  				</div>
  				</div>
  				<div class="device_setting_save" onmousedown="operateRoom('add','down')" onmouseup="operateRoom('add','up')">
  					
  				</div>
  			</div>
  			<div class="device_setting_space_button" onmousedown="deviceModel('down')" onmouseup="deviceModel('up')">布局模式</div>
  		</div>
  	</div>
  </body>
</html>
